<template>
  <div class="pageHead" :class="clientWidth>=1200?'':'no-trans'">
    <div class="navMian" v-if="clientWidth>=1200">
      <router-link to="/" class="heade_Logo"><img :src="siteLogo"/></router-link>
      <nav class="nav_menu">
        <router-link to="/fiat/index">{{lang['headerNavLCTransact']}}</router-link>
        <router-link to="/trading">{{lang['headerNavTransact']}}</router-link>
      </nav>

      <div class="indexHeader_right">
        <div class="lang" @mouseover="isShowLangList= true" @mouseout="isShowLangList= false">
          <a class="text"><img :src="currentLanguage.pic">{{currentLanguage.name}}</a>
          <div v-show="isShowLangList">
            <p>
             <a v-for="(item, key, index) in languageList" @click="switchLanguage(key)" v-if="langSting && langSting.indexOf(key) > -1" :key="index"><img :src="item.pic">{{item.name}}</a>
            </p>
          </div>
        </div>
        <div class="right-nav">
          <router-link to="/help" v-text="lang.index_Header_Help"></router-link>
          <router-link to="/help/about" v-text="lang.footOn"></router-link>
        </div>
        <div class="header_loginLog">
          <a class="text" v-if="mixUserInfo.userName"> {{mixUserInfo.userName}} <img src="../../assets/images/arrow-down.png"></a>
          <div class="menuTwo">
            <router-link to="/safety" class="a1">{{lang['headerAccountSecurity']}}</router-link>
            <router-link to="/assets" class="a2">{{lang['headerAssets']}}</router-link>
            <a class="a3" @click="handleLogout">{{lang['headerExct']}}</a>
          </div>
        </div>

        <div class="header_login">
          <div class="announcement" v-if="mixUserInfo.userName">
            <img src="../../assets/images/index_announcement.png" @click.stop="isAnnouncement = !isAnnouncement">
            <div v-show="isAnnouncement">
              <a v-for="item in marketAn" @click='announcementid_details(item.Keywords)'>
                <em>{{lang[formatDate2(item.CreateTime, 'MM')]}}</em>
                <em>{{formatDate3(item.CreateTime, 'dd')}}</em>
                <em>{{formatDate(item.CreateTime, 'yyyy')}}</em>- {{item.Title}}
              </a>
            </div>
          </div>
          <router-link :to="{path: '/user/login', query: {from: $route.name}}"  v-if="!mixUserInfo.userName">{{lang['headerLogin']}}</router-link>
          <router-link :to="{path: '/user/register', query: {from: $route.name}}"  v-if="!mixUserInfo.userName">{{lang['headerRegistration']}}</router-link>
        </div>
      </div>
    </div>
    <div class="lt1200"  v-else>
      <router-link to="/" class="heade_Logo"><img :src="customInfo.Logo1" v-if="customInfo.Logo1"/><img src="../../assets/images/logo.png" v-else></router-link>
      <div class="title-right">

         <div class="volu"  v-if="mixUserInfo.userName"  @click.stop="isAnnouncement = !isAnnouncement">
                <div v-show="isAnnouncement" class="notice">
                  <a v-for="item in marketAn" @click='announcementid_details(item.Keywords)'>
                    <em>{{lang[formatDate2(item.CreateTime, 'MM')]}}</em>
                    <em>{{formatDate3(item.CreateTime, 'dd')}}</em>
                    <em>{{formatDate(item.CreateTime, 'yyyy')}}</em>- {{item.Title}}
                  </a>
                </div>
         </div>

         <div class="lang">
          <a @click.stop="isShowLangList = !isShowLangList" class="text"><img :src="currentLanguage.pic">{{currentLanguage.name}}</a>
          <div v-if="isShowLangList" id="lang-list">
            <a v-for="(item, key, index) in languageList"  @click="switchLanguage(key)" v-if="langSting && langSting.indexOf(key) > -1" :key="index"><img :src="item.pic">{{item.name}}</a>
          </div>
        </div>

        <div class="icon-list" @click.stop="isShowSubMenu = !isShowSubMenu" :class="isShowSubMenu?'chacha':''">
        </div>

      </div>
      <div class="submenu" v-show="isShowSubMenu">
        <router-link to="/fiat/index" class="linkitem first">{{lang['headerNavLCTransact']}}</router-link>
        <router-link to="/trading"  class="linkitem">{{lang['headerNavTransact']}}</router-link>

        <div class="userInfo">
            <a class="text" @click='showUsrInfo= !showUsrInfo' v-if="mixUserInfo.userName"> {{mixUserInfo.userName}} <img src="../../assets/images/arrow-down.png"></a>
            <div id="menuTwo" v-show='showUsrInfo'   @mouseleave="showUsrInfo=false">
              <router-link to="/safety" class="a1">{{lang.headerAccountSecurity}}</router-link>
              <router-link to="/assets" class="a2">{{lang.headerAssets}}</router-link>
              <a class="a3" @click="handleLogout">{{lang.headerExct}}</a>
            </div>
        </div>
        <div class="login">
            <router-link :to="{path: '/user/login', query: {from: $route.name}}" v-if="!mixUserInfo.userName">{{lang.headerLogin}}</router-link>
            <router-link :to="{path: '/user/register', query: {from: $route.name}}" v-if="!mixUserInfo.userName">{{lang.headerRegistration}}</router-link>
        </div>

      </div>


    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import Utils from '@/utils/Utils.js'
import LoginService from '@/service/LoginService.js'
import _ from '@/libs/lodash.min.js'
export default {
  data () {
    return {
      marketAn: [],
      isAnnouncement: false,
      testshow: 'hide',
      isShowLangList: false,
      isShowSubMenu:false,
      showUsrInfo:false, //用户登录后的二级菜单
      //新增屏幕宽度属性
      clientWidth:`${window.innerWidth}`,
      languageList: {
        'en': {
          name: 'English',
          pic: require('../../assets/images/language/english.png')
        },
        'zh-CN': {
          name: '中文简体',  // this.lang.headerLanguangChinas
          pic: require('../../assets/images/language/chinese.png')
        },
        'zh-Hant': {
          name: '中文繁体',  // this.lang.headerLanguangChinas
          pic: require('../../assets/images/language/chinese.png')
        },
        'ja': {
          name: '日本語',
          pic: require('../../assets/images/language/japanese.png')
        },
        'ko': {
          name: '한국어',
          pic: require('../../assets/images/language/korean.png')
        },
        'fr': {
          name: 'Français',
          pic: require('../../assets/images/language/french.png')
        },
        'nl': {
          name: 'Nederlands',
          pic: require('../../assets/images/language/nederlands.png')
        },
        'vi': {
          name: 'Tiếng Việt',
          pic: require('../../assets/images/language/vietnamese.png')
        }
      },
      currentLanguage: {}
    }
  },
  watch: {
    langKey () {
      // 重新初始化
      this.currentLanguage = this.languageList[this.langKey]
    }
  },
  props: ['lang'],
  computed: {
    ...mapGetters({
      langKey: 'langKey',
      mixUserInfo: 'userInfo',
      customInfo: 'customInfo'
    }),
    langSting: function () {
      return this.customInfo.Languages
    },
    siteLogo: function () {
      return this.customInfo.Logo1 ? this.customInfo.Logo1 : require('../../assets/images/logo.png')
    }
  },
  created () {
    this.currentLanguage = this.languageList[this.langKey]
  },
  methods: {
    formatDate (date) {
      return Utils.formatDate(new Date(date), 'yyyy')
    },
    formatDate2 (date) {
      return Utils.formatDate(new Date(date), 'MM')
    },
    formatDate3 (date) {
      return Utils.formatDate(new Date(date), 'dd')
    },
    getAnList () {
      // 公告列表列表读取
      this.$http.post('Article/GetLatestAnnouncement', {
        top: 5
      }, {
        isQueryString: true
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.marketAn = res.Data || []
        }
      })
    },
    announcementid_details (keywords) {
      this.$router.push({
        path: '/news/announcement_details',
        query: {
          keywords: keywords
        }
      })
    },
    ...mapActions([ 'switchLang' ]),
    switchLanguage (language, dflang) {
      this.currentLanguage = this.languageList[language]
      // 更改语言
      this.switchLang(language)
      this.isShowLangList = false
    },
    handleLogout () {
      LoginService.logout()
      this.$router.push({path: '/user/login'})
    }
  },
  mounted () {
    this.getAnList()

    //获取页面可视宽度，以1200为界,_.debounce为lodash去抖
    const _this=this;

    window.onresize=_.debounce(function(){
         _this.clientWidth=`${window.innerWidth}`
         //console.log(_this.clientWidth)
    },500);
  }
}
</script>
<style>
.pageHead {
  background-color: #191F2B;
  width: 100%;
  min-width: 1200px;
  padding: 0;
  line-height: 50px;
}
.pageHead .navMian {
  height:50px;
  width: 1200px;
  margin: 0 auto;
}

.pageHead .indexAnnouncement {
  position: relative;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  background-color: rgba(0,0,0,0.5);
}

.pageHead .indexAnnouncementMain {
  width:1200px;
  margin: 0 auto;
  position: relative;
}
.pageHead .indexAnnouncement img {
  vertical-align: middle;
  padding-right: 5px;
}

.pageHead .indexAnnouncement span {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0;
  cursor: pointer;
}

.pageHead .heade_Logo {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  float: left;
  color: #fff;
}

.pageHead .heade_Logo img {
  height: 26px;
  margin-top: 12px;
}

.pageHead .nav_menu {
  padding-left: 16px;
  float: left;
  height: 50px;
}

.pageHead .nav_menu a {
  color: #fff;
  margin: 0 20px;
  position: relative;
  font-size: 14px;
}
.pageHead .nav_menu a.router-link-exact-active {
  color: rgba(255,255,255,1);
}
.pageHead .nav_menu a.router-link-exact-active:after {
  content: "";
  display: block;
  height: 1px;
  line-height: 1px;
  width: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  position: absolute;
  bottom: -10px;
}
.pageHead .indexHeader_right .right-nav {
  display: inline-block;
  float: left;
}
.pageHead .indexHeader_right .right-nav a {
  color: #fff;
  font-size: 14px;
}
.pageHead .indexHeader_right .right-nav a:last-child {
  margin: 0 40px 0 40px;
}
.pageHead .indexHeader_right {
  float: right;
}

.pageHead .indexHeader_right .header_login {
  float: left;
  position: relative;
}

.pageHead .indexHeader_right .header_login a {
  margin: 0 0 0 30px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  color: #fff;
  font-size: 14px;
}

.pageHead .indexHeader_right .announcement {
  display: inline-block;
  float: left;
  position: relative;
  margin-right: 20px;
}

.pageHead .indexHeader_right .announcement img {
  vertical-align: middle;
  cursor: pointer;
  margin-top: -2px;
}

.pageHead .indexHeader_right .announcement div {
  position: absolute;
  left: 50%;
  z-index: 100;
  margin-left: -150px;
  width: 300px;
  padding:10px 0;
  border-radius: 5px;
  background-color: rgba(0,0,0,0.65);
}

.pageHead .indexHeader_right .announcement div:after{
  position: absolute;
  top: -10px;
  left: 50%;
  z-index: 100;
  margin-left: -8px;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: solid 10px rgba(0,0,0,0.65);
  border-left: solid 8px Transparent;
  border-right: solid 8px Transparent;
}

.pageHead .indexHeader_right .announcement div a{
   display: block;
   margin: 0 20px;
   line-height: 26px;
   white-space:nowrap;
   word-break:keep-all;
   overflow:hidden;
   text-overflow:ellipsis;
}

.pageHead .indexHeader_right .announcement div a em{
  padding-right: 3px;
}

.pageHead .header_loginLog {
  position: relative;
  float: right;
  padding: 12px 0;
  height: 26px;
  line-height: 26px;
  color: #fff;
}

.pageHead .header_loginLog .text img {
  vertical-align: middle;
  padding-left: 5px;
}

.pageHead .header_loginLog .text {
  float: left;
  display: inline-block;
  background: url(./../../assets/images/user-default-head.png) no-repeat left center;
  padding-left: 35px;
}

.pageHead .menuTwo {
  position: absolute;
  top: 50px;
  right: -34px;
  z-index: 500;
  padding: 10px 0;
  width: 140px;
  background-color:rgba(0,0,0,0.65);
  display: none;
  border-radius: 5px;
}

.pageHead .menuTwo:after{
  position: absolute;
  top: -10px;
  right: 32px;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: solid 10px rgba(0,0,0,0.65);
  border-left: solid 8px Transparent;
  border-right: solid 8px Transparent;
}

.pageHead .header_loginLog:hover .menuTwo {
  display: block;
}

.pageHead .menuTwo a {
  display: block;
  line-height: 37px;
  height: 37px;
  background-repeat: no-repeat;
  background-position: 20px center;
  padding-left: 48px;
  color: #fff;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

.pageHead .menuTwo a:hover,
.pageHead .menuTwo a.active:hover {
  color: #6f9df8;
}

.pageHead .menuTwo a.a1 {
  background-image: url(./../../assets/images/head_safe2.png);
}

.pageHead .menuTwo a.a2 {
  background-image: url(./../../assets/images/head_asses2.png);
}

.pageHead .menuTwo a.a3 {
  background-image: url(./../../assets/images/head_exit2.png);
}



.pageHead .menuTwo a.a1:hover,
.pageHead .menuTwo a.a1.active {
  background-image: url(./../../assets/images/head_safe.png);
}

.pageHead .menuTwo a.a2:hover,
.pageHead .menuTwo a.a2.active {
  background-image: url(./../../assets/images/head_asses.png);
}

.pageHead .menuTwo a.a3:hover,
.pageHead .menuTwo a.a3.active {
  background-image: url(./../../assets/images/head_exit.png);
}



.pageHead .indexHeader_right .lang {
  height: 26px;
  border-radius: 8px;
  margin: 9px 10px 0 30px;
  float: right;
  position: relative;
}

.pageHead .indexHeader_right .lang a.text {
  background: url(./../../assets/images/arrow-down.png) no-repeat right center;
  padding-right: 20px;
}

.pageHead .indexHeader_right .lang  a {
  display: block;
  height: 32px;
  line-height: 32px;
  color: #fff;
  margin: 0 10px;
  font-size: 14px;
}

.pageHead .indexHeader_right .lang a img {
  padding-right: 5px;
  width: 23px;
  height: 14px;
  margin-top: -3px;
  vertical-align: middle;
}

.pageHead .indexHeader_right .lang div {
  position: absolute;
  top: 32px;
  right: -2px;
  z-index: 10;
  padding-top: 9px;
}
.pageHead .indexHeader_right .lang div p{
  padding: 5px 0;
  background: rgba(0,0,0,0.65);
  border-radius: 5px;
  width: 130px;
  z-index: 500;
}

.pageHead .indexHeader_right .lang div p:after{
  position: absolute;
  top: 0;
  right: 10px;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: solid 10px rgba(0,0,0,0.65);
  border-left: solid 8px Transparent;
  border-right: solid 8px Transparent;
}

</style>
<style lang="less" scoped>
 @backimg:"./../../assets/images/";
 .no-trans{
   background: #191f2b;
 }
.pageHead{
  font-size:14px;
  min-width:800px;
  width:100%;
  .lt1200{
   overflow: hidden;
   width:100%;
   height:2.125rem;
   padding:0.8125rem 0;
   z-index:9998;
      .heade_Logo{
         margin-left:1.625rem;
         height:100%;
         line-height:100%;
         img{
           height:100%;
           margin:0;
         }
      }
    .title-right{
      float:right;
      height:2.125rem;
      width:auto;
      margin-right:.8125rem;
      .title-bar(@file){
        width:2.125rem;
        height:100%;
        float:left;
        margin-right:1rem;
        background:url(@file) no-repeat 50% 50%;
          cursor: pointer;
      }
      .volu{
        .title-bar("@{backimg}volu_big.png");
        .notice{
          background:rgba(0,0,0,0.7);
          position: fixed;
          z-index:10010;
          height:auto;
          border-radius: 5px;
          width:12rem;
          margin:3.125rem auto auto -6rem;
          padding:1rem;
          a{
            display:block;
            text-align:center;
            font-size:0.825rem;
            width:100%;
            color:#fff;
            height:2rem;
            line-height:2rem;
          }
          ::after{
              position: absolute;
              top: -10px;
              right: 46%;
              content: "";
              display: block;
              width: 0;
              height: 0;
              border-bottom: solid 10px rgba(0,0,0,0.35);
              border-left: solid 8px Transparent;
              border-right: solid 8px Transparent;
           }
        }
      }
      .icon-list{
         .title-bar("@{backimg}icon_list.png");
      }
      .chacha{
            background:url("@{backimg}page/asset_03.png") no-repeat 50% 50%;
      }
      .lang{
        .title-bar("");
        width:auto;
        margin-right:1.125rem;
        a{
          padding-right:1.4rem;
           display:inline-block;
           margin-top:5px;
           color:#fff;
           line-height:1.625rem;
           vertical-align: top;
           background: url("@{backimg}arrow-down.png") no-repeat right center;
           max-width:100%;
         img{
          display:inline-block;
          margin-right:.325rem;
         }

        }
      }

    }
    #lang-list{
           position: fixed;
           width:8rem;
           right:3.125rem;
           z-index:10000;
           line-height:1.325rem;
           background: rgba(0,0,0,0.65);
           border-radius: 5px;
           padding:0.6rem 0.6rem;
           a{
             display:inline-block;
             background:none;
             font-size:0.875rem;
             width:8rem;
             height:2rem;
             margin:0;
             padding:0;
           }
           ::after{
              position: absolute;
              top: -10px;
              right: 8px;
              content: "";
              display: block;
              width: 0;
              height: 0;
              border-bottom: solid 10px rgba(0,0,0,0.35);
              border-left: solid 8px Transparent;
              border-right: solid 8px Transparent;
           }
    }

    .submenu{
        position: absolute;
        width:105%;
        margin-left:-5%;
        height:3.625rem;
        background-color:#191f2b;
        border-top:1px solid #323440;
        margin-top:2.875rem;
        z-index:9999;

        .linkitem{
            display:inline-block;
            height:100%;
            max-width:60%;
            color:#fff;
            margin-left:4%;
            text-align:right;
        }
        .first{
              margin-left:10%;
        }
        .login,.userInfo{
          float:right;
          margin-right:3.125rem;
          a{
            display: inline-block;
            color:#fff;
            margin-right:1.625rem;
          }
          .text{
            background: url("@{backimg}user-default-head.png") no-repeat left center;
            padding-left:2rem;
          }
        }
     }
     #menuTwo{
            position: fixed;
            z-index:10001;
            width:5.2rem;
            height:7.5rem;
            top:7.2rem;
            right:2.4rem;
            background:#15192b;
            border-radius: 5px;
            padding:0 1.25rem;
             ::after{
              position: absolute;
              top: -10px;
              right: 1.2rem;
              content: "";
              display: block;
              width: 0;
              height: 0;
              border-bottom: solid 10px rgba(0,0,0,0.55);
              border-left: solid 8px Transparent;
              border-right: solid 8px Transparent;
           }
            a{
              float:left;
              clear:both;
              width:70%;
              font-size:0.625rem;
              height:1.2rem;
              line-height:1.5rem;
              margin-top:1rem;
              padding:0;
              text-align:left;
            }
            .text-overflow{
               display: block;
              padding-left:1.5rem;
              text-overflow:ellipsis;
              white-space:nowrap;
              overflow:hidden;
            }
              .a1 {
                .text-overflow;
                background: url("@{backimg}head_safe2.png") no-repeat left center;
                &:hover,&:active{
                  background: url("@{backimg}head_safe.png") no-repeat left center;
                  color:#3575df;
                }
              }
             .a2 {
              .text-overflow;
                background: url("@{backimg}head_asses2.png") no-repeat left center;
                 &:hover,&:active{
                   background: url("@{backimg}head_asses.png") no-repeat left center;
                    color:#3575df;
                }
              }
              .a3 {
                .text-overflow;
                background: url("@{backimg}head_exit2.png") no-repeat left center;
                 &:hover,&:active{
                  background: url("@{backimg}head_exit.png") no-repeat left center;
                   color:#3575df;
                }
              }

    }

  }
}
</style>
